<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件递归</title>
</head>
<body>
<script src="../js/vue.min.js"></script>
<ul id="app">
    <li> {{b}}</li>
    <my-template v-if="a" :a="a.a" :b="a.b"></my-template>
</ul>
<script>  Vue.component("myTemplate", {
    template: '<ul><li @click="todo">{{b}}</li><my-template v-if="a" :a="a.a" :b="a.b"></my-template></ul>',
    methods:{
        todo:function(){
            console.log(this.a);
        }
    },
    props: ["a", "b"]
})
var data = {a: {a: {a: 0, b: 3}, b: 2}, b: 1}
var vm = new Vue({
    el: '#app', data: data, methods: {
        todo: function () {
            this.test += "!";
            console.log(this.a);
        }
    }
});  </script>


</body>
</html>